<template>
  <control title="视频" :is_tab="false">
    <el-form
      ref="form"
      :model="facade"
      @submit.native.prevent
      label-width="90px"
      size="mini"
      label-position="left"
    >
      <el-form-item label="视频来源">
        <el-radio-group
          class="le-radio-group"
          v-model="content.source"
          @change="emptyVideo()"
        >
          <el-radio :label="0">素材库</el-radio>
          <el-radio :label="1">网络</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="视频地址" v-if="content.source == 1">
        <el-input
          placeholder="复制视频地址到这里"
          v-model="content.video.url"
        ></el-input>
        <p class="tips">支持视频源地址和腾讯视频平台的网络视频</p>
      </el-form-item>
      <el-form-item label="视频上传" v-else>
        <div class="select-cover__120">
          <videoDialog v-model="content.video">
            <div slot="upload" class="select-cover__120-add">
              <i class="le-icon le-icon-add select-cover__120-icon"></i>
              <span class="select-cover__120-text">添加视频</span>
            </div>
            <div
              slot="preview"
              slot-scope="scope"
              class="select-cover__120-edit"
            >
              <el-image :src="scope.url.cover || ''" fit="cover">
                <div slot="error" class="image-slot">
                  <i class="le-icon le-icon-morentupian"></i>
                </div>
              </el-image>
              <div class="select-cover__120-tips">替换视频</div>
            </div>
          </videoDialog>
        </div>
        <p class="tips">
          视频大小不超过 100 MB，建议时长在5分钟以内，宽高比 16:9
        </p>
      </el-form-item>
      <el-form-item label="视频封面">
        <div class="select-cover__120">
          <pictureDialog v-model="content.cover">
            <div slot="upload" class="select-cover__120-add">
              <i class="le-icon le-icon-add select-cover__120-icon"></i>
              <span class="select-cover__120-text">添加图片</span>
            </div>
            <div
              slot="preview"
              slot-scope="scope"
              class="select-cover__120-edit"
            >
              <el-image :src="scope.url" fit="cover"></el-image>
              <div class="select-cover__120-tips">替换封面</div>
            </div>
          </pictureDialog>
        </div>
        <p class="tips">大小不超过3M，建议宽高比 16:9</p>
      </el-form-item>
      <el-form-item label="自动播放">
        <el-switch v-model="content.autoplay"></el-switch>
        <span class="tips"> 默认静音播放</span>
      </el-form-item>
      <el-form-item label="循环播放">
        <el-switch v-model="content.loop"></el-switch>
      </el-form-item>
    </el-form>
  </control>
</template>
<script type="text/javascript">
import control from "@/components/control.vue";

export default {
  components: {
    control,
  },
  data() {
    return {};
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {
    content: {
      get() {
        return this.$store.getters.content;
      },
      set(value) {
        let data = {
          key: "content",
          value: value,
        };
        this.$store.commit("finish/setAttribute", data);
      },
    },
    facade: {
      get() {
        return this.$store.getters.facade;
      },
      set(value) {
        let data = {
          key: "facade",
          value: value,
        };
        this.$store.commit("finish/setAttribute", data);
      },
    },
  },
  methods: {
    emptyVideo: function () {
      this.content.video = {};
    },
  },
};
</script>
<style lang="less" scoped>
@import "../attribute.less";
</style>